
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>themelock.com - Chain Responsive Bootstrap3 Admin</title>

        <link href="css/style.default.css" rel="stylesheet">
        <link href="css/prettyPhoto.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        
        <header>
            <div class="headerwrapper">
                <div class="header-left">
                    <a href="index.html" class="logo">
                        <img src="images/logo.png" alt="" /> 
                    </a>
                    <div class="pull-right">
                        <a href="" class="menu-collapse">
                            <i class="fa fa-bars"></i>
                        </a>
                    </div>
                </div><!-- header-left -->
                
                <div class="header-right">
                    
                    <div class="pull-right">
                        
                        <form class="form form-search" action="search-results.html">
                            <input type="search" class="form-control" placeholder="Search" />
                        </form>
                        
                        <div class="btn-group btn-group-list btn-group-notification">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                              <i class="fa fa-bell-o"></i>
                              <span class="badge">5</span>
                            </button>
                            <div class="dropdown-menu pull-right">
                                <a href="" class="link-right"><i class="fa fa-search"></i></a>
                                <h5>Notification</h5>
                                <ul class="media-list dropdown-list">
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user1.png" alt="">
                                        <div class="media-body">
                                          <strong>Nusja Nawancali</strong> likes a photo of you
                                          <small class="date"><i class="fa fa-thumbs-up"></i> 15 minutes ago</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user2.png" alt="">
                                        <div class="media-body">
                                          <strong>Weno Carasbong</strong> shared a photo of you in your <strong>Mobile Uploads</strong> album.
                                          <small class="date"><i class="fa fa-calendar"></i> July 04, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user3.png" alt="">
                                        <div class="media-body">
                                          <strong>Venro Leonga</strong> likes a photo of you
                                          <small class="date"><i class="fa fa-thumbs-up"></i> July 03, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user4.png" alt="">
                                        <div class="media-body">
                                          <strong>Nanterey Reslaba</strong> shared a photo of you in your <strong>Mobile Uploads</strong> album.
                                          <small class="date"><i class="fa fa-calendar"></i> July 03, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user1.png" alt="">
                                        <div class="media-body">
                                          <strong>Nusja Nawancali</strong> shared a photo of you in your <strong>Mobile Uploads</strong> album.
                                          <small class="date"><i class="fa fa-calendar"></i> July 02, 2014</small>
                                        </div>
                                    </li>
                                </ul>
                                <div class="dropdown-footer text-center">
                                    <a href="" class="link">See All Notifications</a>
                                </div>
                            </div><!-- dropdown-menu -->
                        </div><!-- btn-group -->
                        
                        <div class="btn-group btn-group-list btn-group-messages">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-envelope-o"></i>
                                <span class="badge">2</span>
                            </button>
                            <div class="dropdown-menu pull-right">
                                <a href="" class="link-right"><i class="fa fa-plus"></i></a>
                                <h5>New Messages</h5>
                                <ul class="media-list dropdown-list">
                                    <li class="media">
                                        <span class="badge badge-success">New</span>
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user1.png" alt="">
                                        <div class="media-body">
                                          <strong>Nusja Nawancali</strong>
                                          <p>Hi! How are you?...</p>
                                          <small class="date"><i class="fa fa-clock-o"></i> 15 minutes ago</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <span class="badge badge-success">New</span>
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user2.png" alt="">
                                        <div class="media-body">
                                          <strong>Weno Carasbong</strong>
                                          <p>Lorem ipsum dolor sit amet...</p>
                                          <small class="date"><i class="fa fa-clock-o"></i> July 04, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user3.png" alt="">
                                        <div class="media-body">
                                          <strong>Venro Leonga</strong>
                                          <p>Do you have the time to listen to me...</p>
                                          <small class="date"><i class="fa fa-clock-o"></i> July 03, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user4.png" alt="">
                                        <div class="media-body">
                                          <strong>Nanterey Reslaba</strong>
                                          <p>It might seem crazy what I'm about to say...</p>
                                          <small class="date"><i class="fa fa-clock-o"></i> July 03, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="images/photos/user1.png" alt="">
                                        <div class="media-body">
                                          <strong>Nusja Nawancali</strong>
                                          <p>Hey I just met you and this is crazy...</p>
                                          <small class="date"><i class="fa fa-clock-o"></i> July 02, 2014</small>
                                        </div>
                                    </li>
                                </ul>
                                <div class="dropdown-footer text-center">
                                    <a href="" class="link">See All Messages</a>
                                </div>
                            </div><!-- dropdown-menu -->
                        </div><!-- btn-group -->
                        
                        <div class="btn-group btn-group-option">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                              <i class="fa fa-caret-down"></i>
                            </button>
                            <ul class="dropdown-menu pull-right" role="menu">
                              <li><a href="#"><i class="glyphicon glyphicon-user"></i> My Profile</a></li>
                              <li><a href="#"><i class="glyphicon glyphicon-star"></i> Activity Log</a></li>
                              <li><a href="#"><i class="glyphicon glyphicon-cog"></i> Account Settings</a></li>
                              <li><a href="#"><i class="glyphicon glyphicon-question-sign"></i> Help</a></li>
                              <li class="divider"></li>
                              <li><a href="#"><i class="glyphicon glyphicon-log-out"></i>Sign Out</a></li>
                            </ul>
                        </div><!-- btn-group -->
                        
                    </div><!-- pull-right -->
                    
                </div><!-- header-right -->
                
            </div><!-- headerwrapper -->
        </header>
        
        <section>
            <div class="mainwrapper">
                <div class="leftpanel">
                    <div class="media profile-left">
                        <a class="pull-left profile-thumb" href="profile.html">
                            <img class="img-circle" src="images/photos/profile.png" alt="">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Elen Adarna</h4>
                            <small class="text-muted">Beach Lover</small>
                        </div>
                    </div><!-- media -->
                    
                    <h5 class="leftpanel-title">Navigation</h5>
                    <ul class="nav nav-pills nav-stacked">
                        <li><a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
                        <li><a href="messages.html"><span class="pull-right badge">5</span><i class="fa fa-envelope-o"></i> <span>Messages</span></a></li>
                        <li class="parent"><a href=""><i class="fa fa-suitcase"></i> <span>UI Elements</span></a>
                            <ul class="children">
                                <li><a href="alerts.html">Alerts &amp; Notifications</a></li>
                                <li><a href="buttons.html">Buttons</a></li>
                                <li><a href="extras.html">Extras</a></li>
                                <li><a href="graphs.html">Graphs &amp; Charts</a></li>
                                <li><a href="icons.html">Icons</a></li>
                                <li><a href="modals.html">Modals</a></li>
                                <li><a href="widgets.html">Panels &amp; Widgets</a></li>
                                <li><a href="sliders.html">Sliders</a></li>                                
                                <li><a href="tabs-accordions.html">Tabs &amp; Accordions</a></li>
                                <li><a href="typography.html">Typography</a></li>
                            </ul>
                        </li>
                        <li class="parent"><a href=""><i class="fa fa-edit"></i> <span>Forms</span></a>
                            <ul class="children">
                                <li><a href="code-editor.html">Code Editor</a></li>
                                <li><a href="general-forms.html">General Forms</a></li>
                                <li><a href="form-layouts.html">Layouts</a></li>
                                <li><a href="wysiwyg.html">Text Editor</a></li>
                                <li><a href="form-validation.html">Validation</a></li>
                                <li><a href="form-wizards.html">Wizards</a></li>
                            </ul>
                        </li>
                        <li class="parent"><a href=""><i class="fa fa-bars"></i> <span>Tables</span></a>
                            <ul class="children">
                                <li><a href="basic-tables.html">Basic Tables</a></li>
                                <li><a href="data-tables.html">Data Tables</a></li>
                            </ul>
                        </li>
                        <li><a href="maps.html"><i class="fa fa-map-marker"></i> <span>Maps</span></a></li>
                        <li class="parent active"><a href=""><i class="fa fa-file-text"></i> <span>Pages</span></a>
                            <ul class="children">
                                <li><a href="notfound.html">404 Page</a></li>
                                <li><a href="blank.html">Blank Page</a></li>
                                <li><a href="calendar.html">Calendar</a></li>
                                <li><a href="invoice.html">Invoice</a></li>
                                <li><a href="locked.html">Locked Screen</a></li>
                                <li><a href="media-manager.html">Media Manager</a></li>
                                <li><a href="people-directory.html">People Directory</a></li>
                                <li class="active"><a href="profile.html">Profile</a></li>                                
                                <li><a href="search-results.html">Search Results</a></li>
                                <li><a href="signin.html">Sign In</a></li>
                                <li><a href="signup.html">Sign Up</a></li>
                            </ul>
                        </li>
                        
                    </ul>
                    
                </div><!-- leftpanel -->
                
                <div class="mainpanel">
                    <div class="pageheader">
                        <div class="media">
                            <div class="pageicon pull-left">
                                <i class="fa fa-user"></i>
                            </div>
                            <div class="media-body">
                                <ul class="breadcrumb">
                                    <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
                                    <li><a href="">Pages</a></li>
                                    <li>Profile Page</li>
                                </ul>
                                <h4>Profile Page</h4>
                            </div>
                        </div><!-- media -->
                    </div><!-- pageheader -->
                    
                    <div class="contentpanel">
                        
                        <div class="row">
                            <div class="col-sm-4 col-md-3">
                                <div class="text-center">
                                    <img src="images/photos/profile-big.jpg" class="img-circle img-offline img-responsive img-profile" alt="" />
                                    <h4 class="profile-name mb5">Elen Adarna</h4>
                                    <div><i class="fa fa-map-marker"></i> San Francisco, California, USA</div>
                                    <div><i class="fa fa-briefcase"></i> Software Engineer at <a href="">Company, Inc.</a></div>
                                
                                    <div class="mb20"></div>
                                
                                    <div class="btn-group">
                                        <button class="btn btn-primary btn-bordered">Following</button>
                                        <button class="btn btn-primary btn-bordered">Followers</button>
                                    </div>
                                </div><!-- text-center -->
                                
                                <br />
                              
                                <h5 class="md-title">About</h5>
                                <p class="mb30">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat... <a href="">Show More</a></p>
                              
                                <h5 class="md-title">Connect</h5>
                                <ul class="list-unstyled social-list">
                                    <li><i class="fa fa-twitter"></i> <a href="">twitter.com/eileensideways</a></li>
                                    <li><i class="fa fa-facebook"></i> <a href="">facebook.com/eileen</a></li>
                                    <li><i class="fa fa-youtube"></i> <a href="">youtube.com/eileen22</a></li>
                                    <li><i class="fa fa-linkedin"></i> <a href="">linkedin.com/4ever-eileen</a></li>
                                    <li><i class="fa fa-pinterest"></i> <a href="">pinterest.com/eileen</a></li>
                                    <li><i class="fa fa-instagram"></i> <a href="">instagram.com/eiside</a></li>
                                </ul>
                              
                                <div class="mb30"></div>
                              
                                <h5 class="md-title">Address</h5>
                                <address>
                                    795 Folsom Ave, Suite 600<br>
                                    San Francisco, CA 94107<br>
                                    <abbr title="Phone">P:</abbr> (123) 456-7890
                                </address>
                              
                            </div><!-- col-sm-4 col-md-3 -->
                            
                            <div class="col-sm-8 col-md-9">
                              
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs nav-line">
                                    <li class="active"><a href="#activities" data-toggle="tab"><strong>Activities</strong></a></li>
                                    <li><a href="#followers" data-toggle="tab"><strong>Followers</strong></a></li>
                                    <li><a href="#following" data-toggle="tab"><strong>Following</strong></a></li>
                                    <li><a href="#events" data-toggle="tab"><strong>My Events</strong></a></li>
                                </ul>
                            
                                <!-- Tab panes -->
                                <div class="tab-content nopadding noborder">
                                    <div class="tab-pane active" id="activities">
                                        <div class="activity-list">  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="images/photos/user1.png" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <strong>Ray Sin</strong> started following <strong>Eileen Sideways</strong>. <br />
                                                    <small class="text-muted">Yesterday at 3:30pm</small>
                                                </div>
                                            </div><!-- media -->
                                  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="images/photos/profile.png" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <strong>Elen Adarna</strong> posted a new blog. <br />
                                                    <small class="text-muted">Today at 3:18pm</small>
                                                  
                                                    <div class="media blog-media">
                                                        <a class="pull-left" href="#">
                                                            <img class="media-object thumbnail" src="images/photos/media5.png" alt="" />
                                                        </a>
                                                        <div class="media-body">
                                                            <h4 class="media-title"><a href="">Ut Enim Ad Minim Veniam</a></h4>
                                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... <a href="">Read more</a></p>
                                                        </div>
                                                      </div><!-- media -->      
                                                </div><!-- media-body -->
                                            </div><!-- media -->
                                  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object" src="images/photos/user2.png" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <strong>Chris Anthemum</strong> started following <strong>Eileen Sideways</strong>. <br />
                                                    <small class="text-muted">2 days ago at 8:30am</small>
                                                </div>
                                            </div><!-- media -->
                                  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="images/photos/profile.png" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <strong>Elen Adarna</strong> uploaded <a href="">5 photos</a>. <br />
                                                    <small class="text-muted">5 days ago at 12:30pm</small>
                                      
                                                    <ul class="uploadphoto-list">
                                                        <li><a href="images/photos/media1.jpg" data-rel="prettyPhoto"><img src="images/photos/media1.jpg" class="thumbnail img-responsive" alt="" /></a></li>
                                                        <li><a href="images/photos/media2.png" data-rel="prettyPhoto"><img src="images/photos/media2.png" class="thumbnail img-responsive" alt="" /></a></li>
                                                        <li><a href="images/photos/media3.png" data-rel="prettyPhoto"><img src="images/photos/media3.png" class="thumbnail img-responsive" alt="" /></a></li>
                                                    </ul>
                                                </div>
                                            </div><!-- media -->
                                  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="images/photos/user4.png" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <strong>Frank Furter</strong> started following <strong>Eileen Sideways</strong>. <br />
                                                    <small class="text-muted">6 days ago at 8:15am</small>
                                                </div>
                                            </div><!-- media -->
                                  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="images/photos/profile.png" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <strong>Elen Adarna</strong> posted a new note. <br />
                                                    <small class="text-muted">6 days ago at 6:18am</small>
                                                    <h4 class="media-title"><a href="">Consectetur Adipisicing Elit</a></h4>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... <a href="">Read more</a></p>
                                                </div>
                                            </div><!-- media -->
                                  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="images/photos/profile.png" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <strong>Elen Adarna</strong> posted a new blog. <br />
                                                    <small class="text-muted">December 25 at 3:18pm</small>
                                          
                                                    <div class="media blog-media">
                                                        <a class="pull-left" href="#">
                                                            <img class="media-object thumbnail" src="images/photos/media4.png" alt="" />
                                                        </a>
                                                        <div class="media-body">
                                                            <h4 class="media-title"><a href="">Ut Enim Ad Minim Veniam</a></h4>
                                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... <a href="">Read more</a></p>
                                                        </div>
                                                    </div><!-- media -->
                                                </div>
                                            </div><!-- media -->
                                  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="images/photos/profile.png" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <strong>Elen Adarna</strong> added new photo. <br />
                                                    <small class="text-muted">December 24 at 1:30pm</small>
                                                    <div class="mb20"></div>
                                                    <a href="images/photos/media6.png" data-rel="prettyPhoto" class="img-single"><img src="images/photos/media6.png" class="thumbnail img-responsive" alt="" /></a>
                                                </div>
                                            </div><!-- media -->
                                  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="images/photos/user5.png" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <strong>Weno Carasbong</strong> started following <strong>Elen Adarna</strong>. <br />
                                                    <small class="text-muted">December 15 at 3:30pm</small>
                                                </div>
                                            </div><!-- media -->
                                  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="images/photos/profile.png" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <strong>Elen Adarna</strong> posted a new blog. <br />
                                                    <small class="text-muted">December 15 at 3:18pm</small>
                                          
                                                    <div class="media blog-media">
                                                        <a class="pull-left" href="#">
                                                            <img class="media-object thumbnail" src="images/photos/media7.png" alt="" />
                                                        </a>
                                                        <div class="media-body">
                                                            <h4 class="media-title"><a href="">Ut Enim Ad Minim Veniam</a></h4>
                                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... <a href="">Read more</a></p>
                                                        </div>
                                                    </div><!-- media -->
                                                </div>
                                            </div><!-- media -->  
                                        </div><!-- activity-list -->
                                
                                        <button class="btn btn-white btn-block">Show More</button>
                                    </div><!-- tab-pane -->
                                    
                                    <div class="tab-pane" id="followers">
                                
                                        <div class="follower-list">
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="holder.js/100x100" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <h3 class="follower-name">Ray Sin</h3>
                                                    <div><i class="fa fa-map-marker"></i> San Francisco, California, USA</div>
                                                    <div><i class="fa fa-briefcase"></i> Software Engineer at <a href="">SomeCompany, Inc.</a></div>
                                      
                                                    <div class="mb20"></div>
                                      
                                                    <div class="btn-toolbar">
                                                        <div class="btn-group">
                                                            <button class="btn btn-dark btn-xs"><i class="fa fa-envelope-o"></i> Send Message</button>
                                                        </div><!-- btn-group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-white btn-xs"><i class="fa fa-check"></i> Following</button>
                                                            <button class="btn btn-white btn-xs"><i class="fa fa-check"></i> Followers</button>
                                                        </div><!-- btn-group -->
                                                        
                                                    </div><!-- btn-toolbar -->
                                                </div><!-- media-body -->
                                            </div><!-- media -->
                                            
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="holder.js/100x100" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <h3 class="follower-name">Weno Carasbong</h3>
                                                    <div><i class="fa fa-map-marker"></i> Cebu City, Philippines</div>
                                                    <div><i class="fa fa-briefcase"></i> Software Engineer at <a href="">ITCompany, Inc.</a></div>
                                      
                                                    <div class="mb20"></div>
                                      
                                                    <div class="btn-toolbar">
                                                        <div class="btn-group">
                                                            <button class="btn btn-dark btn-xs"><i class="fa fa-envelope-o"></i> Send Message</button>
                                                        </div><!-- btn-group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-white btn-xs"><i class="fa fa-check"></i> Following</button>
                                                            <button class="btn btn-white btn-xs"><i class="fa fa-check"></i> Followers</button>
                                                        </div><!-- btn-group -->
                                                    </div><!-- btn-toolbar -->
                                                </div><!-- media-body -->
                                            </div><!-- media -->
                                  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="holder.js/100x100" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <h3 class="follower-name">Nusja Nawancali</h3>
                                                    <div class="profile-location"><i class="fa fa-map-marker"></i> Madrid, Spain</div>
                                                    <div class="profile-position"><i class="fa fa-briefcase"></i> CEO at <a href="">SomeCompany, Inc.</a></div>
                                      
                                                    <div class="mb20"></div>
                                      
                                                    <div class="btn-toolbar">
                                                        <div class="btn-group">
                                                            <button class="btn btn-dark btn-xs"><i class="fa fa-envelope-o"></i> Send Message</button>
                                                        </div><!-- btn-group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-white btn-xs"><i class="fa fa-check"></i> Following</button>
                                                            <button class="btn btn-white btn-xs"><i class="fa fa-check"></i> Followers</button>
                                                        </div><!-- btn-group -->
                                                    </div><!-- btn-toolbar -->
                                                </div><!-- media-body -->
                                            </div><!-- media -->
                                  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="holder.js/100x100" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <h3 class="follower-name">Zaham Sindilmaca</h3>
                                                    <div><i class="fa fa-map-marker"></i> Bangkok, Thailand</div>
                                                    <div><i class="fa fa-briefcase"></i> Java Developer at <a href="">ITCompany, Inc.</a></div>
                                      
                                                    <div class="mb20"></div>
                                      
                                                    <div class="btn-toolbar">
                                                        <div class="btn-group">
                                                            <button class="btn btn-dark btn-xs"><i class="fa fa-envelope-o"></i> Send Message</button>
                                                        </div><!-- btn-group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-white btn-xs"><i class="fa fa-check"></i> Following</button>
                                                            <button class="btn btn-white btn-xs"><i class="fa fa-check"></i> Followers</button>
                                                        </div><!-- btn-group -->
                                                    </div><!-- btn-toolbar -->
                                                </div><!-- media-body -->
                                            </div><!-- media -->
                                  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="holder.js/100x100" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <h3 class="follower-name">Christopher Atam</h3>
                                                    <div class="profile-location"><i class="fa fa-map-marker"></i> Tokyo, Japan</div>
                                                    <div class="profile-position"><i class="fa fa-briefcase"></i> QA Engineer at <a href="">SomeCompany, Inc.</a></div>
                                      
                                                    <div class="mb20"></div>
                                      
                                                    <div class="btn-toolbar">
                                                        <div class="btn-group">
                                                            <button class="btn btn-dark btn-xs"><i class="fa fa-envelope-o"></i> Send Message</button>
                                                        </div><!-- btn-group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-white btn-xs"><i class="fa fa-check"></i> Following</button>
                                                            <button class="btn btn-white btn-xs"><i class="fa fa-check"></i> Followers</button>
                                                        </div><!-- btn-group -->
                                                    </div><!-- btn-toolbar -->
                                                </div><!-- media-body -->
                                            </div><!-- media -->
                                  
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="holder.js/100x100" alt="" />
                                                </a>
                                                <div class="media-body">
                                                    <h3 class="follower-name">Venro Leonga</h3>
                                                    <div class="profile-location"><i class="fa fa-map-marker"></i> Paris, France</div>
                                                    <div class="profile-position"><i class="fa fa-briefcase"></i> UX Designer at <a href="">ITCompany, Inc.</a></div>
                                      
                                                    <div class="mb20"></div>
                                      
                                                    <div class="btn-toolbar">
                                                        <div class="btn-group">
                                                            <button class="btn btn-dark btn-xs"><i class="fa fa-envelope-o"></i> Send Message</button>
                                                        </div><!-- btn-group -->
                                                        <div class="btn-group">
                                                            <button class="btn btn-white btn-xs"><i class="fa fa-check"></i> Following</button>
                                                            <button class="btn btn-white btn-xs"><i class="fa fa-check"></i> Followers</button>
                                                        </div><!-- btn-group -->
                                                    </div><!-- btn-toolbar -->
                                                </div><!-- media-body -->
                                            </div><!-- media -->  
                                        </div><!--follower-list -->
                                    </div><!-- tab-pane -->
                                    
                                    <div class="tab-pane" id="following">
                                
                                        <div class="activity-list">
                                            <div class="media">
                                                <a class="pull-left" href="#">
                                                    <img class="media-object img-circle" src="images/photos/user2.png" alt="" />
                                                </a>
                                            <div class="media-body">
                                                <strong>Chris Anthemum</strong> liked a photos<br />
                                                <small class="text-muted">Today at 12:30pm</small>
                                      
                                                <ul class="uploadphoto-list">
                                                    <li><a href="images/photos/media5.png" data-rel="prettyPhoto"><img src="images/photos/media5.png" class="thumbnail img-responsive" alt="" /></a></li>
                                                    <li><a href="images/photos/media4.png" data-rel="prettyPhoto"><img src="images/photos/media4.png" class="thumbnail img-responsive" alt="" /></a></li>
                                                </ul>
                                            </div>
                                        </div><!-- media -->
                                  
                                        <div class="media">
                                            <a class="pull-left" href="#">
                                                <img class="media-object img-circle" src="images/photos/user1.png" alt="" />
                                            </a>
                                            <div class="media-body">
                                                <strong>Ray Sin</strong> is now following to <strong>Chris Anthemum</strong>. <br />
                                                <small class="text-muted">Yesterday at 1:30pm</small>
                                            </div><!-- media-body -->
                                        </div><!-- media -->
                                  
                                        <div class="media">
                                            <a class="pull-left" href="#">
                                                <img class="media-object img-circle" src="images/photos/user4.png" alt="" />
                                            </a>
                                            <div class="media-body">
                                                <strong>Frank Furter</strong> is now following to <strong>Ray Sin</strong>. <br />
                                                <small class="text-muted">3 days ago at 1:30pm</small>
                                            </div>
                                        </div><!-- media -->
                                  
                                        <div class="media">
                                            <a class="pull-left" href="#">
                                                <img class="media-object img-circle" src="images/photos/user2.png" alt="" />
                                            </a>
                                            <div class="media-body">
                                                <strong>Chris Anthemum</strong> liked a photos<br />
                                                <small class="text-muted">5 days ago at 12:30pm</small>
                                      
                                                <ul class="uploadphoto-list">
                                                    <li><a href="images/photos/media6.png" data-rel="prettyPhoto"><img src="images/photos/media6.png" class="thumbnail img-responsive" alt="" /></a></li>
                                                    <li><a href="images/photos/media7.png" data-rel="prettyPhoto"><img src="images/photos/media7.png" class="thumbnail img-responsive" alt="" /></a></li>
                                                    <li><a href="images/photos/media2.png" data-rel="prettyPhoto"><img src="images/photos/media2.png" class="thumbnail img-responsive" alt="" /></a></li>
                                                </ul>
                                            </div><!-- media-body -->
                                        </div><!-- media -->
                                  
                                        <div class="media">
                                            <a class="pull-left" href="#">
                                                <img class="media-object img-circle" src="images/photos/user1.png" alt="" />
                                            </a>
                                            <div class="media-body">
                                                <strong>Nusja Nawancali</strong> is now following to <strong>Zaham Sindilmaca</strong>. <br />
                                                <small class="text-muted">December 25 at 1:30pm</small>
                                            </div><!-- media-body -->
                                        </div><!-- media -->
                                  
                                        <div class="media">
                                            <a class="pull-left" href="#">
                                                <img class="media-object img-circle" src="images/photos/user4.png" alt="" />
                                            </a>
                                            <div class="media-body">
                                                <strong>Frank Furter</strong> is now following to <strong>Zaham Sindilmaca</strong>. <br />
                                                <small class="text-muted">December 24 at 1:30pm</small>
                                            </div><!-- media-body -->
                                        </div><!-- media -->
                                  
                                        <div class="media">
                                            <a class="pull-left" href="#">
                                                <img class="media-object img-circle" src="images/photos/user3.png" alt="" />
                                            </a>
                                            <div class="media-body">
                                                <strong>Nusja NawanCali</strong> posted a new blog. <br />
                                                <small class="text-muted">December 23 at 3:18pm</small>
                                          
                                                <div class="media blog-media">
                                                    <a class="pull-left" href="#">
                                                        <img class="media-object" src="images/photos/media3.png" alt="" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="media-title"><a href="">Ut Enim Ad Minim Veniam</a></h4>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... <a href="">Read more</a></p>
                                                    </div><!-- media-body -->
                                                </div><!-- media -->
                                            </div><!-- media-body -->
                                        </div><!-- media -->
                                  
                                        <div class="media">
                                            <a class="pull-left" href="#">
                                                <img class="media-object img-circle" src="images/photos/user4.png" alt="" />
                                            </a>
                                            <div class="media-body">
                                                <strong>Mark Zonsion</strong> is now following to <strong>Weno Carasbong</strong>. <br />
                                                <small class="text-muted">December 23 at 1:30pm</small>
                                            </div><!-- media-body -->
                                        </div><!-- media -->
                                  
                                        <div class="media">
                                            <a class="pull-left" href="#">
                                                <img class="media-object img-circle" src="images/photos/user4.png" alt="" />
                                            </a>
                                            <div class="media-body">
                                                <strong>Frank Furter</strong> is now following to <strong>Weno Carasbong</strong>. <br />
                                                <small class="text-muted">December 20 at 4:30pm</small>
                                            </div><!-- media-body -->
                                        </div><!-- media -->
                                  
                                    </div><!-- activity-list -->
                                    <button class="btn btn-white btn-block">Show More</button>
                                </div><!-- tab-pane -->
                                
                                <div class="tab-pane" id="events">
                                    <div class="events">
                                        <h5 class="lg-title mb20">Upcoming Events</h5>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="media">
                                                    <a class="pull-left" href="#">
                                                        <img class="media-object thumbnail" src="holder.js/100x120" alt="" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="event-title"><a href="">Free Living Trust Seminar</a></h4>
                                                        <small class="text-muted"><i class="fa fa-map-marker"></i> Silicon Valley, San Francisco, CA</small>
                                                        <small class="text-muted"><i class="fa fa-calendar"></i> Sunday, January 15, 2014 at 11:00am</small>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                                                    </div>
                                                </div><!-- media -->
                                            </div><!-- col-sm-6 -->
                                    
                                            <div class="col-sm-6">
                                                <div class="media">
                                                    <a class="pull-left" href="#">
                                                        <img class="media-object thumbnail" src="holder.js/100x120" alt="" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="event-title"><a href="">Serious Games Seminar</a></h4>
                                                        <small class="text-muted"><i class="fa fa-map-marker"></i> New York City</small>
                                                        <small class="text-muted"><i class="fa fa-calendar"></i> Monday, January 14, 2014 at 8:00am</small>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                                                    </div>
                                                </div><!-- media -->
                                            </div><!-- col-sm-6 -->
                                    
                                            <div class="col-sm-6">
                                                <div class="media">
                                                    <a class="pull-left" href="#">
                                                        <img class="media-object thumbnail" src="holder.js/100x120" alt="" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="event-title"><a href="">Travel &amp; Adventure Show</a></h4>
                                                        <small class="text-muted"><i class="fa fa-map-marker"></i> Los Angeles, CA</small>
                                                        <small class="text-muted"><i class="fa fa-calendar"></i> Friday, January 12, 2014 at 8:00am</small>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                                                    </div>
                                                </div><!-- media -->
                                            </div><!-- col-sm-6 -->
                                    
                                            <div class="col-sm-6">
                                                <div class="media">
                                                    <a class="pull-left" href="#">
                                                        <img class="media-object thumbnail" src="holder.js/100x120" alt="" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="event-title"><a href="">Mobile Games Summit</a></h4>
                                                        <small class="text-muted"><i class="fa fa-map-marker"></i> Bay Area, San Francisco</small>
                                                        <small class="text-muted"><i class="fa fa-calendar"></i> Saturday, January 10, 2014 at 8:00am</small>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                                                    </div>
                                                </div><!-- media -->
                                            </div><!-- col-sm-6 -->
                                        </div><!-- row -->
                                  
                                        <br />
                                  
                                        <h5 class="lg-title mb20">Past Events</h5>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="media">
                                                    <a class="pull-left" href="#">
                                                        <img class="media-object thumbnail" src="holder.js/100x120" alt="" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="event-title"><a href="">Free Living Trust Seminar</a></h4>
                                                        <small class="text-muted"><i class="fa fa-map-marker"></i> Silicon Valley, San Francisco, CA</small>
                                                        <small class="text-muted"><i class="fa fa-calendar"></i> Sunday, January 15, 2014 at 11:00am</small>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                                                    </div>
                                                </div><!-- media -->
                                            </div><!-- col-sm-6 -->
                                    
                                            <div class="col-sm-6">
                                                <div class="media">
                                                    <a class="pull-left" href="#">
                                                        <img class="media-object thumbnail" src="holder.js/100x120" alt="" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="event-title"><a href="">Serious Games Seminar</a></h4>
                                                        <small class="text-muted"><i class="fa fa-map-marker"></i> New York City</small>
                                                        <small class="text-muted"><i class="fa fa-calendar"></i> Monday, January 14, 2014 at 8:00am</small>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                                                    </div>
                                                </div><!-- media -->
                                            </div><!-- col-sm-6 -->
                                    
                                            <div class="col-sm-6">
                                                <div class="media">
                                                    <a class="pull-left" href="#">
                                                        <img class="media-object thumbnail" src="holder.js/100x120" alt="" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="event-title"><a href="">Travel &amp; Adventure Show</a></h4>
                                                        <small class="text-muted"><i class="fa fa-map-marker"></i> Los Angeles, CA</small>
                                                        <small class="text-muted"><i class="fa fa-calendar"></i> Friday, January 12, 2014 at 8:00am</small>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                                                    </div>
                                                </div><!-- media -->
                                            </div><!-- col-sm-6 -->
                                    
                                            <div class="col-sm-6">
                                                <div class="media">
                                                    <a class="pull-left" href="#">
                                                        <img class="media-object thumbnail" src="holder.js/100x120" alt="" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="event-title"><a href="">Mobile Games Summit</a></h4>
                                                        <small class="text-muted"><i class="fa fa-map-marker"></i> Bay Area, San Francisco</small>
                                                        <small class="text-muted"><i class="fa fa-calendar"></i> Saturday, January 10, 2014 at 8:00am</small>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                                                    </div>
                                                </div><!-- media -->
                                            </div><!-- col-sm-6 -->
                                        </div><!-- row -->
                                    </div><!-- events -->
                                </div><!-- tab-pane -->
                                
                            </div><!-- tab-content -->
                              
                            </div><!-- col-sm-9 -->
                        </div><!-- row -->  
                    
                    </div><!-- contentpanel -->
                    
                </div>
            </div><!-- mainwrapper -->
        </section>


        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/modernizr.min.js"></script>
        <script src="js/pace.min.js"></script>
        <script src="js/retina.min.js"></script>
        <script src="js/jquery.cookies.js"></script>
        
        <script src="js/jquery.prettyPhoto.js"></script>
        <script src="js/holder.js"></script>

        <script src="js/custom.js"></script>
        <script>
            jQuery(document).ready(function(){
              
              jQuery("a[data-rel^='prettyPhoto']").prettyPhoto();
              
            });
        </script>

    </body>
</html>
